<!--
 * @Author: 曹捷
 * @Date: 2020-12-29 19:56:15
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-02-09 00:42:40
 * @Description: 多选 行级元素
-->
<template>
  <u-checkbox-group :max="max" @change="checkboxGroupChange" width="100%" class="checkbox-btn needsclick"
    :class="{'hasdisable':checkData.length >= max}" :activeColor="activeColor" :size="44">
    <u-checkbox @tips="showInfo" :tips="$t('goodInfo.max')+'$'+$t('goodInfo.name')" class="list-item needsclick"
      v-model="item.checked" :class="{'select':item.checked}" shape="circle" :name="item[keyName]"
      v-for="(item, index) in dataList" :key="index">
      <div class="flex-l-r needsclick">
        <span class="one-line needsclick">{{item[label]}}</span>
        <slot name="right" class="needsclick" :row="item"></slot>
      </div>
    </u-checkbox>
  </u-checkbox-group>
</template>

<script>
export default {
  props: {
    value: {
      type: [Array, String],
    },
    dataList: {
      type: Array,
    },
    label: {
      type: String,
      default: 'valueDesc',
    },
    keyName: {
      type: String,
      default: 'codeValue',
    },
    // 样式类型
    activeColor: {
      type: String,
      default: '#fba531'
    },
    max: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      checkData: []
    }
  },
  methods: {
    checkboxGroupChange (e) {
      this.checkData = e
      this.$emit('input', this.checkData)
      this.$emit('change', this.checkData)
    },
    showInfo (tip) {
      let content = `${this.$t('goodInfo.max')}${tip}${this.$t('goodInfo.name')}`
      console.log('🚀 ~ file: checkbox-btn.vue ~ line 61 ~ showInfo ~ content', content)
      this.$emit('toast', content)
      // this.$refs.toast.open({ content })
    }
  }

}
</script>

<style lang="scss"  >
.needsclick {
  position: relative;
}
.one-line {
  flex: 1;
  width: 0;
}
</style>